import React from 'react';
import {
  Button,
  Card,
  Content,
  DatePicker,
  Form,
  Input,
  WithContext,
} from 'react-fule-ui';
import { createHashHistory } from 'history';
import { useState } from 'react';

const history = createHashHistory();

const formArr = [
  {
    label: '消费事件',
    name: 'event',
    component: 'Input',
    status: '',
  },
  {
    label: '消费余额',
    name: 'num',
    component: 'Input',
    status: '',
  },
  {
    label: '消费日期',
    name: 'data',
    component: 'DatePicker',
    status: '',
  },
];
function Edit(props) {
  const { actions } = props;
  const [title, seTtitle] = useState('');
  const [pay, seTPay] = useState('');
  const [time, seTtime] = useState('');
  const [formData, seTformData] = useState(formArr);
  // 获取日期
  const onChange = (year, month, day, status) => {
    const time = `${year}-${month}-${day}`;
    seTtime(time);
  };
  // 获取Input
  const onInput = (data, name) => {
    if (name === 'event') {
      seTtitle(data);
    }
    if (name === 'num') {
      seTPay(data);
    }
  };
  // 确认提交
  const submitForm = (isEdit) => {
    const arr = {
      title,
      pay,
      time,
      cid: '1',
    };
    const issuccess = title.length && pay.length && time.length;
    if (!isEdit) {
      if (issuccess > 0) {
        actions.createItem(arr);
        history.push('/Pages/Bookkeeping');
      }
    } else {
    }
    const newItme = formData.map((item) => {
      if (title === '' && item.name === 'event') {
        return { ...item, status: 'error' };
      } else if (pay === '' && item.name === 'num') {
        return { ...item, status: 'error' };
      } else {
        return { ...item, status: '' };
      }
    });
    seTformData(newItme);
  };
  // 取消提交
  const cancelSubmit = () => {
    history.push('/Pages/Bookkeeping');
  };
  return (
    <Content>
      <Content.Header>创建信息</Content.Header>
      <Content.Body>
        <Card>
          <Card.Body>
            <Form allAlign="top" labelStyle={{ minWidth: '80px' }}>
              {formData.map((item, index) => (
                <Form.Item label={item.label} status={item.status} key={index}>
                  {item.component === 'Input' && (
                    <Input
                      placeholder="请输入内容"
                      onChange={(data) => onInput(data, item.name)}
                    />
                  )}
                  {item.component === 'DatePicker' && (
                    <DatePicker
                      defaultValue="2020-12-20"
                      starAge="2020"
                      endAge="2028"
                      onChange={onChange}
                    ></DatePicker>
                  )}
                </Form.Item>
              ))}
              {/* <Form.Item label="消费事件">
                  <Input
                    placeholder="请输入内容"
                    onChange={onInput}
                    name="itemName"
                  />
                </Form.Item>
                <Form.Item label="消费余额">
                  <Input
                    placeholder="请输入内容"
                    onChange={onInput}
                    name="itemNum"
                  />
                </Form.Item>
                <Form.Item label="时间">
                  <DatePicker
                    defaultValue="2020-12-20"
                    starAge="2020"
                    endAge="2028"
                    onClick={onChange}
                  ></DatePicker>
                </Form.Item> */}
            </Form>
          </Card.Body>
          <Card.Foot>
            <Button type="button" primary onClick={submitForm}>
              确定
            </Button>
            <Button type="submit" onClick={cancelSubmit}>
              取消
            </Button>
          </Card.Foot>
        </Card>
      </Content.Body>
    </Content>
  );
}
export default WithContext(Edit);
